import React, { useState } from 'react';
import { Chapter } from '../types/book';
import { Link, useNavigate } from 'react-router-dom';
import { BackButton } from './BackButton';

interface ChapterListProps {
  bookId: string;
  chapters: Chapter[];
}

export const ChapterList: React.FC<ChapterListProps> = ({ bookId, chapters }) => {
  const navigate = useNavigate();
  const [isNavigating, setIsNavigating] = useState(false);
  
  const getBookmark = () => {
    const saved = localStorage.getItem(`bookmark-${bookId}`);
    return saved ? JSON.parse(saved) : null;
  };

  const bookmark = getBookmark();

  const handleBookmarkClick = () => {
    if (bookmark && !isNavigating) {
      setIsNavigating(true);
      
      // 添加一个遮罩层
      const overlay = document.createElement('div');
      overlay.className = 'fixed inset-0 bg-white z-50';
      document.body.appendChild(overlay);
      
      // 在 URL 中添加书签信息
      navigate(`/book/${bookId}/chapter/${bookmark.chapterId}?bookmark=${bookmark.index}`);
      
      // 导航完成后移除遮罩层
      setTimeout(() => {
        if (document.body.contains(overlay)) {
          document.body.removeChild(overlay);
        }
        setIsNavigating(false);
      }, 500);
    }
  };

  return (
    <div className="max-w-4xl mx-auto p-6">
      <BackButton />
      <div className="bg-white rounded-lg shadow-lg">
        <div className="p-6">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-semibold">章节列表</h2>
            {bookmark && (
              <button 
                className={`bg-blue-50 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-100 transition-colors duration-200 ${
                  isNavigating ? 'opacity-50 cursor-not-allowed' : ''
                }`}
                onClick={handleBookmarkClick}
                disabled={isNavigating}
              >
                <div className="flex items-center space-x-2">
                  <svg
                    className="w-5 h-5"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z" />
                  </svg>
                  <span>
                    {chapters.find(c => c.id === bookmark.chapterId)?.number} · 第 {bookmark.index + 1} 段
                  </span>
                </div>
              </button>
            )}
          </div>
          <div className="space-y-4">
            {chapters.map((chapter) => (
              <Link
                key={chapter.id}
                to={`/book/${bookId}/chapter/${chapter.id}`}
                className="block p-4 border rounded-lg hover:bg-gray-50 transition-colors duration-200"
              >
                <div className="flex justify-between items-center">
                  <div>
                    <h3 className="text-lg font-medium">
                      {chapter.number}・{chapter.titleEnglish}
                    </h3>
                    <p className="text-gray-600">{chapter.titleChinese}</p>
                  </div>
                  <svg
                    className="w-6 h-6 text-gray-400"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M9 5l7 7-7 7"
                    />
                  </svg>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}; 